<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>空气质量可视化看板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
    <style>
        body { margin: 20px; font-family: Arial, sans-serif; }
        .header { text-align: center; padding: 20px; background: #f8f9fa; }
        .chart-row { display: flex; flex-wrap: wrap; justify-content: space-between; }
        .chart-container {
            width: 48%;
            height: 400px;
            margin: 10px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>全国城市空气质量可视化看板</h1>
        <p>数据更新时间：{{ data.update_time }} | 共收录 {{ data.total_cities }} 个城市数据</p>
    </div>

    <div class="chart-row">
        <!-- 饼图 -->
        <div id="pieChart" class="chart-container"></div>

        <!-- 柱状图 -->
        <div id="barChart" class="chart-container"></div>
    </div>

    <div class="chart-row">
        <!-- 等级分布图 -->
        <div id="levelChart" class="chart-container"></div>

        <!-- 地理分布图 -->
        <div id="geoChart" class="chart-container"></div>
    </div>

    <script>
        // 初始化所有图表
        function initCharts() {
            // 饼图配置
            const pieChart = echarts.init(document.getElementById('pieChart'));
            pieChart.setOption({
                title: { text: 'AQI等级分布比例' },
                tooltip: { trigger: 'item' },
                series: [{
                    type: 'pie',
                    data: [
                        {% for name, value in data.aqi_distribution.items() %}
                        { name: '{{ name }}', value: {{ value }} },
                        {% endfor %}
                    ],
                    radius: '60%'
                }]
            });

            // 柱状图配置
            const barChart = echarts.init(document.getElementById('barChart'));
            barChart.setOption({
                title: { text: 'AQI最高的前10个城市' },
                tooltip: {},
                xAxis: {
                    data: {{ data.top10.cities | tojson }},
                    axisLabel: { rotate: 45 }
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: {{ data.top10.aqi | tojson }},
                    itemStyle: {
                        color: function(params) {
                            const aqi = params.value;
                            return aqi > 200 ? '#c23531' :
                                   aqi > 150 ? '#d48265' :
                                   aqi > 100 ? '#91c7ae' :
                                   aqi > 50 ? '#749f83' : '#61a0a8';
                        }
                    }
                }]
            });

            // 等级分布图
            const levelChart = echarts.init(document.getElementById('levelChart'));
            levelChart.setOption({
                title: { text: '各等级城市数量分布' },
                tooltip: {},
                xAxis: {
                    data: {{ data.categories | tojson }},
                    axisLabel: { rotate: 45 }
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: {{ data.values | tojson }},
                    itemStyle: {
                        color: function(params) {
                            const index = params.dataIndex;
                            return index === 0 ? '#61a0a8' :
                                   index === 1 ? '#749f83' :
                                   index === 2 ? '#91c7ae' :
                                   index === 3 ? '#d48265' :
                                   index === 4 ? '#c23531' : '#873e3c';
                        }
                    }
                }]
            });

            // 地理分布图
            const geoChart = echarts.init(document.getElementById('geoChart'));
            geoChart.setOption({
                title: { text: '城市AQI分布示意图' },
                tooltip: {},
                visualMap: {
                    min: 0,
                    max: 500,
                    text: ['高', '低'],
                    calculable: true,
                    inRange: { color: ['#65B581', '#FFCE34', '#FD665F'] }
                },
                series: [{
                    type: 'map',
                    map: 'China',
                    data: {{ data.geo_data | tojson }},
                    label: { show: true }
                }]
            });
        }

        // 窗口调整时自适应图表
        window.addEventListener('resize', function() {
            echarts.getInstanceByDom(document.getElementById('pieChart')).resize();
            echarts.getInstanceByDom(document.getElementById('barChart')).resize();
            echarts.getInstanceByDom(document.getElementById('levelChart')).resize();
            echarts.getInstanceByDom(document.getElementById('geoChart')).resize();
        });

        // 初始化图表
        window.onload = initCharts;
    </script>
</body>
</html>